<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      svg {
        border: 1px solid red;
      }
    </style>
  </head>

  <body>
    <svg width="300"
         height="300"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         viewBox="0 0 300 300">
      <circle id="circle"
              cx="15"
              cy="15"
              r="15"
              style="fill: green;fill-opacity: 0.4;stroke:red;stroke-dasharray: 1,1; stroke-dashoffset: 0;" />
      <rect x="100"
            y="100"
            width="100"
            height="80"
            rx="5"
            ry="5"
            style="fill:transparent;stroke: black;" />
      <polygon points="10,10 80,50 100,100 10,10"
               style="stroke: red;fill: transparent;" />

      <g id="star">
        <polygon points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5
                42.3,60.1 35,55 27.7,60.1 30.3,51.5
                23.1,46.1 32.1,46.1"
                 style="fill: #ccffcc; stroke: green;transform: rotateZ(0deg);" />
      </g>
      <use xlink:href="#star" />
      <polygon style="fill-rule: nonzero; fill: yellow; stroke: black;"
               points="48,16 16,96 96,48 0,48 80,96" />
      <polygon style="fill-rule: evenodd; fill: #00ff00; stroke: black;"
               stroke-linecap="round"
               stroke-linejoin="round"
               points="148,16 116,96 196,48 100,48 180,96" />

      <polyline points="5 20, 20 20, 25 10, 35 30, 45 10,
               55 30, 65 10, 75 30, 80 20, 95 20"
                stroke="black"
                stroke-width="3"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round" />
    </svg>
    <script>
      let n = 0;
      let starN = 0;
      const circle = document.querySelector("#circle");
      const star = document.querySelector("#star");
      function renderer() {
        if (n >= 50) {
          n = 0;
        }
        circle.style.strokeDashoffset = n;
        star.style.transform = `rotateZ(${starN}deg)`;
        n += 0.1;
        starN += 10;
        window.requestAnimationFrame(renderer);
      }
      renderer();
    </script>
  </body>

</html>
